<template>
	<view class=""  style="padding-top: 40px;">
		<uni-forms label-width='90px' :modelValue="confessionWallInfo">
			<uni-forms-item label="文案" required name="articlesInfo">
				<uni-easyinput type="textarea" v-model="confessionWallInfo.wallCopy"
					placeholder="输入想要发表的文案!" />
			</uni-forms-item>
			<uni-forms-item label="上传图片" required>
				<view class="example-body">
					<uni-file-picker @delete="deletedImg" @select="selectedImg" limit="3" :del-icon="true"
						disable-preview file-extname="png,jpg" file-mediatype="image">
					</uni-file-picker>
				</view>
			</uni-forms-item>
			<uni-forms-item label="是否显示联系方式自己的QQ" required>
				<uni-data-checkbox v-model="confessionWallInfo.selectContactInfoFlag" :localdata="flag" />
			</uni-forms-item>
			<button type="primary" @click="addConfessionWall()">上传</button>
		</uni-forms>
	</view>
</template>

<script>
	import nowTime from '../publicData/nowTime.js'
	import uploadFiles from '../publicData/uploadFiles.js'
	import request from '../network/request.js'
	import {mapState, mapActions, mapMutations} from 'vuex'
	import baseUrl from '../publicData/baseUrl.js'
	export default {
		name: 'addConfessionWall',
		
		computed: {
			...mapState('userModule', ["userInfo"]),
			...mapState('publicModule', ["token"])
		},
		
		data(){
			return{
				// 墙信息
				confessionWallInfo: {
					uId: '',
					wallCopy: '',
					releaseTime: '',
					confessionWallImgs: '',
					selectContactInfoFlag: 0
				},
				
				// 预下载图片列表
				confessionWallImgList: [],
				
				flag: [{
					text: '是',
					value: 1
				},{
					text: '否',
					value: 0
				}]
			}
		},
		
		onLoad() {
		},
		
		methods: {
			
			...mapActions('confessionWallModule', ["addConfessionWallInfo"]),
			
			// 将选好的图片加入预上传列表
			selectedImg(e){
				e.tempFilePaths.forEach(file => {
					this.confessionWallImgList.push(file)
				})
			},
			
			// 将选好的图片从预上传列表中删除
			deletedImg(e){
				this.confessionWallImgList.forEach((item, index) => {
					if(item.slice(12) === e.tempFilePath.slice(12)){
						this.confessionWallImgList.splice(index, 1)
					}
				})
			},
			
			// 提交上传墙信息
			addConfessionWall(){
				const that = this
				
				
				// 设置上传时间
				that.confessionWallInfo.releaseTime = nowTime()
				
				// 设置 uId 
				that.confessionWallInfo.uId = that.userInfo.id
				
				// 判断内容是否为空
				if(that.confessionWallInfo.wallCopy === ''){
					return uni.showToast({
						title: '未填写文案！',
						icon:'none'
					})
				}
				
				// 上传没有图片的墙信息
				if(this.confessionWallImgList.length <= 0){
					// 上传
					that.addConfessionWallInfo({
						confessionWallInfo: that.confessionWallInfo,
						token: that.token
					})
					
					return
				}
				
				// 上传带有图片文件的墙信息
				uploadFiles({
					url: baseUrl.host +  '/sendWallImgs',
					files: that.confessionWallImgList,
					token: that.token
				}).then(data => {
					that.confessionWallInfo.confessionWallImgs = JSON.stringify(data)
					
					// 上传
					that.addConfessionWallInfo({
						confessionWallInfo: that.confessionWallInfo,
						token: that.token
					})
				}).catch(err => {
					console.log(err)
				})
				console.log(that.confessionWallInfo)
			}
			
		}
	}
</script>

<style>
</style>